<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>萝卜仓库首页</title>
    <link rel="stylesheet" href="/assets/bootstrap-5.3.8-dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="/assets/css/index.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css">
    <style>
      /* .btn_primary{
        background-color: blue;
      }
      .btn_danger{
        background-color: red;
      } */
    </style>
</head>
<body>
    <div class="card">
        <div class="card-body">
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb">
                  <li class="breadcrumb-item"><a href="#">首页</a></li>
                  <li class="breadcrumb-item active" aria-current="page">图书管理</li>
                </ol>
              </nav>
              <hr>
              <div class="operate">
                <div class="search">
                    <span>图书搜索：</span>
                    <input type="text" class="form-control" placeholder="请输入要搜索的图书的ID">
                </div>
                <div class="operation">
                    <button type="button" class="btn btn-success"><i class="bi bi-search searchBook"></i></button>
                    <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">添加</button>
                </div>
              </div>
              <table class="table">
                <!-- 表头 -->
                <thead>
                  <tr>
                    <th scope="col">编号</th>
                    <th scope="col">书名</th>
                    <th scope="col">作者</th>
                    <th scope="col">出版社</th>
                    <th scope="col">操作</th>
                  </tr>
                </thead>
                <tbody>
                </tbody>
              </table>


                   <!-- 添加图书框 -->
      <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog">
          <div class="modal-content">
            <div class="modal-header">
              <h1 class="modal-title fs-5" id="exampleModalLabel">添加图书</h1>
              <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
              <form>
                <div class="bookname">
                  <label for="">书&nbsp;&nbsp;&nbsp;名:</label>
                    <input type="text" class="form-control newBookName" placeholder="请输入书名">
                  
                </div>
                <div class="author">
                  <label for="">作&nbsp;&nbsp;&nbsp;者:</label>
                    <input type="text" class="form-control newAuthor" placeholder="请输入作者">
                </div>
                <div class="publisher">
                  <label for="">出版社:</label>
                    <input type="text" class="form-control newPublisher" placeholder="请输入出版社">
                </div>
              </form>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
              <button type="button" class="btn btn-primary addBook" data-bs-toggle="modal" data-bs-target="#exampleModal">确定</button>
            </div>
          </div>
        </div>
      </div>
        </div>
      </div>


      <!-- 修改图书框 -->
      <div class="modal fade" id="exampleModal2" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog">
          <div class="modal-content">
            <div class="modal-header">
              <h1 class="modal-title fs-5" id="exampleModalLabel">修改图书</h1>
              <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
              <form>
                <div class="bookname">
                  <label for="">书&nbsp;&nbsp;&nbsp;名:</label>
                    <input type="text" class="form-control updateBookName" placeholder="请输入书名">
                  
                </div>
                <div class="author">
                  <label for="">作&nbsp;&nbsp;&nbsp;者:</label>
                    <input type="text" class="form-control updateAuthor" placeholder="请输入作者">
                </div>
                <div class="publisher">
                  <label for="">出版社:</label>
                    <input type="text" class="form-control updatePublisher" placeholder="请输入出版社">
                </div>
              </form>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
              <button type="button" class="btn btn-primary updateBook" 
              data-bs-toggle="modal" data-bs-target="#exampleModal2">确定</button>
            </div>
          </div>
        </div>
      </div>
        </div>
      </div>

      <script src="./assets/js/jquery-3.7.1.min.js"></script>
      <script src="./assets/bootstrap-5.3.8-dist/js/bootstrap.min.js"></script>
      <script>
        // 获取图书
        function getBookList(){
          //清楚之前的数据
          $('tbody tr').remove();
          $.ajax({
                type: 'GET',
                url: `http://ajax-api.itheima.net/api/books`,
                success:data  => {
                    console.log(data);
                    // 将服务器返回数据循环遍历放入页面
                    // 抽出需要数据
                    let bookList=data.data
                    // 此处item为一条数据
                    bookList.forEach(item => {
                      // 遍历一条数据就创建一行放在body
                      let tr =$(`<tr>
                        <td>${item.id}</td>
                        <td>${item.bookname}</td>
                        <td>${item.author}</td>
                        <td>${item.publisher}</td>
                        <td>
                          <button type="button" class="btn btn-primary" data-bs-toggle="modal" 
                          data-bs-target="#exampleModal2" onclick="editBook(${item.id})">修改</button>
                          <button type="button" class="btn btn-danger" onclick="deleteBook(${item.id})">删除</button>
                        </td>
                        </tr>`)
                        //创建元素
                        
                        $('tbody').append(tr)
                    })
                }
            })
        }
        // 删除
        function deleteBook(id){
          $.ajax({
            type:'DELETE',
            url:`http://ajax-api.itheima.net/api/books/${id}`,
            success:() => {
              alert("删除成功！")
              //删除后获取图书列表
              getBookList()
            }
          })
        }
        //查询图书
       $('.searchBook').click(function(){
        let id=$('input')
        if(!id.val()){
          getBookList()
        }else{
          $.ajax({
            type:'GET',
            url:`http://ajax-api.itheima.net/api/books/${id.val()}`,
            success:(data) => {
              //将ID置空
              id.val('')
              let bookInfo=data.data
              alert(data.message);
              $('tbody tr').remove()
              let tr =$(`<tr>
                        <td>${bookInfo.id}</td>
                        <td>${bookInfo.bookname}</td>
                        <td>${bookInfo.author}</td>
                        <td>${bookInfo.publisher}</td>
                        <td>
                          <button type="button" class="btn btn-primary">修改</button>
                          <button type="button" class="btn btn-danger" onclick="deleteBook(${bookInfo.id})">删除</button>
                        </td>
                        </tr>`)
                        $('tbody').append(tr)
                        
            
            }
          })

        }
       })

      //  添加图书
      $('.addBook').click(function(){
        let bookname=$('.newBookName')
        let author=$('.newAuthor')
        let publisher=$('.newPublisher')
        if(!(bookname.val() && author.val() && publisher.val())){
          alert("图书信息不能为空！")
        }else{
          $.ajax({
            type:'POST',
            url:'http://ajax-api.itheima.net/api/books',
            data:{
              bookname:bookname.val(),
              author:author.val(),
              publisher:publisher.val()
            },
            success:() =>{
              // 清空input内容
              bookname.val('')
              author.val('') 
              publisher.val('')
              alert("图书添加成功！")
              // 重新获取最新图书列表
              getBookList()
            }
          })
        }
      })

      // 修改图书
      function editBook(id){
        console.log(id);
        //针对get请求可以直接使用$.get
        $.get(`http://ajax-api.itheima.net/api/books/${id}`,data =>{
          let bookInfo =data.data
          // console.log(bookInfo);
          $('.updateBookName').val(bookInfo.bookname)
          $('.updateAuthor').val(bookInfo.author)
          $('.updatePublisher').val(bookInfo.publisher)

          //确定修改，发起请求
          //判断完整非空校验
          $('.updateBook').click(function(){
            let bookname=$('.updateBookName').val()
            let author= $('.updateAuthor').val()
            let publisher=$('.updatePublisher').val()

            if(!(bookname && author && publisher)){
              alert('图书信息不能为空')
            }else{
              $.ajax({
                type:'PUT',
                url:`http://ajax-api.itheima.net/api/books/${id}`,
                data:{
                  bookname,
                  author,
                  publisher
                },
                success:() =>{
                  alert('修改成功！')
                  getBookList()
                }
              })
            }
            
          })
        })
      }

      getBookList()
      </script>
 
</body>
</html>